/**
 * 这个模块保持了原状，没有进行二次优化处理
 * you can you up
 */
import React, { Fragment, PureComponent } from 'react'
import {  Input, Button, Form, Row, Col, Radio, Select, Table, Divider,DatePicker,message } from 'antd';
import { CaretLeftOutlined, CaretRightOutlined, ReloadOutlined } from '@ant-design/icons';
import { connect } from 'dva'
import PropTypes from 'prop-types';
import moment from 'moment';
import * as R from 'ramda'
import VehicleDetailMsgModal from '../../modals/msgModal';
import SendMsgModal from '../../modals/sendMsgModal';
import SMSModal from '../../modals/SMSModal';
import * as G from '@/utils/common'
import { getDictOptionsByCode } from '@/support/common'
import styles from '../../style.less'


const { RangePicker } = DatePicker;
const { TextArea } = Input;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
let vinNumber = '';
let pdsn = '';
let tbox = '';
let date = '';
let dateList = [];
let count = 0;
const maxLength = 500;

// @Form.create()
@connect(state => ({
  currentUser: state.user.currentUser,
  vehicle: state.vehicle,
}))
export default class TboxLogTab extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.array,
    authButton: PropTypes.array,
  };
  state = {
    searchVisible: {},
    serviceType: '',
    messageType: '',
    refreshDisable: true,
    leftDisable: true,
    rightDisable: true,
    tboxList: [],
    tboxPage: {},
    tboxLoading: false,
    msgVisible: false,
    msg: '',
    smsVisible: false,
    sms: '',
    sendVisible: false,
    title: '',
    typeDisable: false,
    url: 'vehicle/simulateDownTboxLogs',
  };

  componentWillMount() {
    const { rowData, dispatch } = this.props;
    vinNumber = rowData.vin;
    pdsn = rowData.pdsn;
    tbox= rowData.tbox;

    this.setState({
      searchVisible: {},
      serviceType: '',
      messageType: '',
      refreshDisable: true,
      leftDisable: true,
      rightDisable: true,
      tboxLoading: true,
    });
   dispatch({
      type: 'vehicle/searchTboxGMDSS',
      payload: {
        vin: vinNumber,
        pdsn,
        tbox,
      },
      callback: (response) => {
        if (response.statusCode === '0' && response.data) {
          const param = response.data;
          const obj = param.hits.hits;
          const list = obj.map(item => item._source);
          const pageObj = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: 1,
            pageSize: 10,
            showTotal: () =>
              <span>共&nbsp;{list === undefined ? 0 : param.hits.hits.length}&nbsp;条</span>,
          };
          this.setState({ tboxList: list, tboxPage: pageObj });
          if (param.hits.hits.length < maxLength) {
            this.setState({
              leftDisable: true,
              rightDisable: true,
            });
          } else {
            this.setState({
              leftDisable: false,
              rightDisable: true,
            });
          }
        }
        this.setState({ tboxLoading: false, refreshDisable: false });
      },
    });
  }

  componentDidMount() {
    this.refs.form.setFieldsValue({ tboxType: 'other' });
    this.refs.form.resetFields(['serviceType', 'messageType']);
  }

  handleTableChange = (page) => {
    const pagination = {
      current: page.current,
      pageSize: page.pageSize,
    };
    this.setState({
      tboxPage: pagination,
    });
  };

  handleSearch = () => {
    const { form: { getFieldValue } } = this.refs
    const tboxType = getFieldValue('tboxType')
    if (tboxType === 'dm') {
      this.dmLogSearch()
    } else if (tboxType === 'other') {
      this.otherLogSearch()
    }
  }

  existDoValidate = (rangeValue) => {
    const tempRangeTime = R.when(
      G.isNotEmptyAndNil,
      range => [range[0].format('YYYY-MM-DD HH:mm:ss'), range[1].format('YYYY-MM-DD HH:mm:ss')],
    )(rangeValue)

    if (G.isEmptyOrNil(tempRangeTime)) return []
    const [startTime, endTime] = tempRangeTime
    if (moment(startTime).isBefore(moment().subtract(14, 'day'))) {
      return message.error('只能查询最近14天的记录!')
    }
    if (moment(startTime).isBefore(moment(endTime).subtract(3, 'hour'))) {
      return message.error('查询区间为三个小时!')
    }
    return tempRangeTime
  }


  otherLogSearch = () => {
    const { form: { getFieldValue } } = this.refs
    const rangeValue = getFieldValue('userLogRangeOther')
    const targetRangeTime = this.existDoValidate(rangeValue)
    if (R.equals(R.type(targetRangeTime), 'Function')) return
    const { serviceType, messageType } = this.state;
    this.setState({
      tboxLoading: true,
      refreshDisable: true,
      leftDisable: true,
      rightDisable: true,
    });
    date = '';
    count = 0;
    dateList = [];
    this.props.dispatch({
      type: 'vehicle/searchTboxGMDSS',
      payload: {
        vin: vinNumber,
        pdsn,
        tbox,
        serviceType,
        messageType,
        ...G.omitEmptyAndNil(R.objOf('rangeTime',targetRangeTime.join())),
      },
      callback: (response) => {
        if (response.statusCode === '0' && response.data) {
          const param = response.data;
          const obj = param.hits.hits;
          const list = obj.map(item => item._source);
          const pageObj = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: 1,
            pageSize: 10,
            showTotal: () =>
              <span>共&nbsp;{list === undefined ? 0 : param.hits.hits.length}&nbsp;条</span>,
          };
          this.setState({ tboxList: list, tboxPage: pageObj });
          if (param.hits.hits.length < maxLength) {
            this.setState({
              leftDisable: true,
              rightDisable: true,
            });
          } else {
            this.setState({
              leftDisable: false,
              rightDisable: true,
            });
          }
        }
        this.setState({ tboxLoading: false, refreshDisable: false });
      },
    });
  }

  dmLogSearch = () => {
    const { form: { getFieldValue, } } = this.refs
    const rangeValue = getFieldValue('userLogRangedm')
    const targetRangeTime = this.existDoValidate(rangeValue)
    if (R.equals(R.type(targetRangeTime), 'Function')) return
    this.setState({
      tboxLoading: true,
      refreshDisable: true,
      leftDisable: true,
      rightDisable: true,
    });
    date = '';
    count = 0;
    dateList = [];
    this.props.dispatch({
      type: 'vehicle/searchDMTboxGMDSS',
      payload: {
        vin: vinNumber,
        pdsn,
        tbox,
        ...G.omitEmptyAndNil(R.objOf('rangeTime',targetRangeTime.join())),
      },
      callback: (response) => {
        if (response.statusCode === '0' && response.data) {
          const param = response.data;
          const obj = param.hits.hits;
          const list = obj.map(item => item._source);
          const pageObj = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: 1,
            pageSize: 10,
            showTotal: () =>
              <span>共&nbsp;{list === undefined ? 0 : param.hits.hits.length}&nbsp;条</span>,
          };
          this.setState({ tboxList: list, tboxPage: pageObj });
          if (param.hits.hits.length < maxLength) {
            this.setState({
              leftDisable: true,
              rightDisable: true,
            });
          } else {
            this.setState({
              leftDisable: false,
              rightDisable: true,
            });
          }
        }
        this.setState({ tboxLoading: false, refreshDisable: false });
      },
    });
  }

  handleFormReset = () => {
    const { getFieldValue } = this.refs.form
    const tboxType = getFieldValue('tboxType')
    this.refs.form.resetFields(['serviceType', 'messageType', 'userLogRangeOther', 'userLogRangedm'])
    this.setState({
      tboxLoading: true,
      refreshDisable: true,
      leftDisable: true,
      rightDisable: true,
      serviceType: '',
      messageType: '',
    });
    date = '';
    count = 0;
    dateList = [];
    this.props.dispatch({
      type: R.equals(tboxType,'other')? 'vehicle/searchTboxGMDSS':'vehicle/searchDMTboxGMDSS',
      payload: {
        vin: vinNumber,
        pdsn,
        tbox,
      },
      callback: (response) => {
        if (response.statusCode === '0' && response.data) {
          const param = response.data;
          const obj = param.hits.hits;
          const list = obj.map(item => item._source);
          const pageObj = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: 1,
            pageSize: 10,
            showTotal: () =>
              <span>共&nbsp;{list === undefined ? 0 : param.hits.hits.length}&nbsp;条</span>,
          };
          this.setState({ tboxList: list, tboxPage: pageObj });
          if (param.hits.hits.length < maxLength) {
            this.setState({
              leftDisable: true,
              rightDisable: true,
            });
          } else {
            this.setState({
              leftDisable: false,
              rightDisable: true,
            });
          }
        }
        this.setState({ tboxLoading: false, refreshDisable: false });
      },
    });
  }


  handleLeft = (url) => {
    const { serviceType, messageType } = this.state;
    this.setState({
      tboxLoading: true,
      refreshDisable: true,
      leftDisable: true,
      rightDisable: true,
    });
    const { tboxList } = this.state;
    let searchDate = '';
    if (tboxList.length !== 0) {
      searchDate = tboxList[tboxList.length - 1].colletionDataTime;
      searchDate = (moment(searchDate).add(1, 's').format('YYYY-MM-DD HH:mm:ss'));
      const endTime = moment(searchDate).format('YYYY-MM-DD HH:mm:ss')
      count += 1;
      date = tboxList[0].colletionDataTime;
      date = (moment(date).add(1, 's').format('YYYY-MM-DD HH:mm:ss'));
      dateList.push(date);
      this.props.dispatch({
        type: url,
        payload: {
          vin: vinNumber,
          pdsn,
          tbox,
          serviceType,
          messageType,
          rangeTime: `${this.rightStartTime()},${endTime}`,
        },
        callback: (response) => {
          if (response.statusCode === '0' && response.data) {
            const param = response.data;
            const obj = param.hits.hits;
            const list = obj.map(item => item._source);
            const pageObj = {
              showSizeChanger: true,
              showQuickJumper: true,
              current: 1,
              pageSize: 10,
              showTotal: () =>
                (<span>共&nbsp;{list === undefined ? 0 : param.hits.hits.length}&nbsp;条</span>),
            };
            this.setState({ tboxList: list, tboxPage: pageObj });
            if (param.hits.hits.length < maxLength) {
              this.setState({
                leftDisable: true,
                rightDisable: false,
              });
            } else {
              this.setState({
                leftDisable: false,
                rightDisable: false,
              });
            }
          } else {
            date = '';
            count = 0;
            dateList = [];
            this.setState({
              leftDisable: true,
              rightDisable: true,
            });
          }
          this.setState({ tboxLoading: false, refreshDisable: false });
        },
      });
    }
  }

  rightStartTime = () => {
    const { form: { getFieldValue } } = this.refs
    const tboxType = getFieldValue('tboxType')
    const userLogRangeOther = getFieldValue('userLogRangeOther')
    const userLogRangedm = getFieldValue('userLogRangedm')
    let startTime = moment().subtract(14, 'day').format('YYYY-MM-DD HH:mm:ss')
    if (tboxType === 'dm' && G.isNotEmptyAndNil(userLogRangedm)) {
      startTime = userLogRangedm[0].format('YYYY-MM-DD HH:mm:ss')
    } else if (tboxType === 'other' && G.isNotEmptyAndNil(userLogRangeOther)) {
      startTime = userLogRangeOther[0].format('YYYY-MM-DD HH:mm:ss')
    }
    return startTime
  }

  handleRight = (url) => {
    const dateListLength = dateList.length
    const { serviceType, messageType } = this.state;
    this.setState({
      tboxLoading: true,
      refreshDisable: true,
      leftDisable: true,
      rightDisable: true,
    });
    count -= 1;
    this.props.dispatch({
      type: url,
      payload: {
        vin: vinNumber,
        pdsn,
        tbox,
        serviceType,
        messageType,
        rangeTime: `${this.rightStartTime()},${dateList[count]}`,
      },
      callback: (response) => {
        if (response.statusCode === '0' && response.data) {
          const param = response.data;
          const obj = param.hits.hits;
          const list = obj.map(item => item._source);
          const pageObj = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: 1,
            pageSize: 10,
            showTotal: () =>
              (<span>共&nbsp;{list === undefined ? 0 : param.hits.hits.length}&nbsp;条</span>),
          };
          this.setState({ tboxList: list, tboxPage: pageObj });
          if (dateList.indexOf(date) !== 0) {
            date = dateList[dateList.indexOf(date) - 1];
          }
          if (count === 0) {
            if (param.hits.hits.length === 0) {
              this.setState({
                leftDisable: true,
                rightDisable: true,
              });
            } else {
              this.setState({
                leftDisable: false,
                rightDisable: true,
              });
            }
            dateList = [];
          } else if (param.hits.hits.length === 0) {
            this.setState({
              leftDisable: true,
              rightDisable: true,
            });
          } else {
            this.setState({
              leftDisable: false,
              rightDisable: false,
            });
          }
        } else {
          date = '';
          count = 0;
          dateList = [];
          this.setState({
            leftDisable: true,
            rightDisable: true,
          });
        }
        this.setState({ tboxLoading: false, refreshDisable: false });
      },
    });
  }

  onServiceTypeChange = (value) => {
    this.setState({ serviceType: value });
  }

  onMessageTypeChange = (value) => {
    this.setState({ messageType: value });
  }

  onTboxTypeChange = (e) => {
    if (e.target.value === 'dm') {
      this.refs.form.resetFields(['serviceType', 'messageType','userLogRangedm']);
      this.setState({
        searchVisible: {display: 'none'},
        serviceType: '',
        messageType: '',
      });
      this.dmLogSearch();
    } else if (e.target.value === 'other'){
      this.refs.form.resetFields(['serviceType', 'messageType','userLogRangeOther']);
      this.setState({ searchVisible: {} });
      this.otherLogSearch();
    }
  }

  onRefresh = () => {
    const { tboxType } = this.refs.form.getFieldsValue(['tboxType']);
    if (tboxType === 'dm') {
      this.dmLogSearch();
    } else if (tboxType === 'other'){
      this.otherLogSearch();
    }
  }

  onLeft = () => {
    const { tboxType } = this.refs.form.getFieldsValue(['tboxType']);
    if (tboxType === 'dm') {
      this.handleLeft('vehicle/searchDMTboxGMDSS');
    } else if (tboxType === 'other'){
      this.handleLeft('vehicle/searchTboxGMDSS');
    }
  }

  onRight = () => {
    const { tboxType } = this.refs.form.getFieldsValue(['tboxType']);
    if (tboxType === 'dm') {
      this.handleRight('vehicle/searchDMTboxGMDSS');
    } else if (tboxType === 'other'){
      this.handleRight('vehicle/searchTboxGMDSS');
    }
  }

  handleOpenMsg = (value) => {
    const obj = value;
    obj.vin = vinNumber;
    this.setState({ msgVisible: true, msg: obj });
  }

  handleCloseMsg = () => {
    this.setState({ msgVisible: false });
  }
  handleCloseSMS = () => {
    this.setState({ smsVisible: false });
  }
  handleCloseSend = () => {
    this.setState({ sendVisible: false });
  }

  handleOpenSMS = (msgId) => {
    this.props.dispatch({
      type: 'vehicle/findTboxSmsBySmsId',
      payload: msgId,
      callback: (response) => {
        let param = '';
        if (response.code === '200' && response.data) {
          const obj = JSON.parse(response.data);
          if (obj.hits.hits.length !== 0) {
            param = obj.hits.hits[0]._source;
            this.setState({ smsVisible: true, sms: param });
          } else {
            message.error('短信详情没有数据');
          }
        }
      },
    });
  }

  onRef = (ref) => {
    this.SendMsgModalRef = ref;
  }

  handleOpenSend = (value) => {
    const obj = value;
    obj.vin = vinNumber;
    if (value.direction === '1') {
      this.setState({
        title: '模拟上发消息',
        typeDisable: true,
        url: 'vehicle/simulateUpTboxLogs',
      });
    } else if (value.direction === '2') {
      this.setState({
        title: '模拟下发消息',
        typeDisable: false,
        url: 'vehicle/simulateDownTboxLogs',
      });
    }
    this.SendMsgModalRef.props.form.setFieldsValue({
      serviceType: obj.serviceType,
      messageType: obj.messageType,
      channelType: obj.channelType,
      vin: obj.vin,
      eventId: obj.eventId,
    });
    this.setState({ sendVisible: true });
  }



  renderSimpleForm() {
    // const { getFieldValue } = this.refs.form
    const tboxType = this.refs.form ? this.refs.form.getFieldValue('tboxType') : 'other';
    const serviceTypeOptions = getDictOptionsByCode(this.context.dicData, 'vehicleServiceType');
    const msgTypeOptions = getDictOptionsByCode(this.context.dicData, 'vehicleMsgType')
    const isSendDown = true // this.context.authButton.includes('vehicleDetail-sendDown');
    const isSendUp = true // this.context.authButton.includes('vehicleDetail-sendUp');

    const {
      searchVisible, tboxLoading,
      serviceType, messageType, refreshDisable, leftDisable, rightDisable, tboxList, tboxPage,
    } = this.state
    const column2 = [
      {
        title: 'event_id',
        dataIndex: 'eventId',
        render: (text) => {
          return text
        },
      }, {
        title: 'service_type',
        dataIndex: 'serviceType',
        render: (text) => {
          return text
        },
      }, {
        title: 'message_type',
        dataIndex: 'messageType',
        render: (text) => {
          return text
        },
      }, {
        title: '方向',
        dataIndex: 'direction',
        render: (text) => {
          if (text === '1') {
            return 'TU->TSP'
          } else if (text === '2') {
            return 'TSP->TU'
          } else {
            return text
          }
        },
      }, {
        title: 'create_time',
        dataIndex: 'colletionDataTime',
        render: (text) => {
          return text
        },
      }, {
        title: 'message_content',
        dataIndex: 'content',
        render: (text) => {
          if (text) {
            return `${text.substring(0, 20)} ...`
          } else {
            return text
          }
        },
      }, {
        title: '说明',
        dataIndex: 'descr',
        render: (text) => {
          return text
        },
      }, {
        title: 'message_status',
        dataIndex: 'messageStatus',
        render: (text) => {
          return text+"" ? G.getDicByKey(this.context.dicData, 'vehicleMessageStatus', text) : ''
        },
      }, {
        title: '操作',
        width: 300,
        fixed: 'right',
        dataIndex: 'action',
        render: (text, record) => {
          if (record.direction === '1') {
            if (record.channelType === 'SMS' && record.smsMsgId) {
              return (
                <div>
                  <a onClick={() => this.handleOpenMsg(record)}>消息详情</a>
                  <Divider type="vertical" />
                  <a onClick={() => this.handleOpenSMS(record.smsMsgId)}>短信详情</a>
                  {isSendUp ?
                    <span>
                      <Divider type="vertical" />
                      <a onClick={() => this.handleOpenSend(record)}>模拟上发</a>
                    </span> : ''
                  }
                </div>
              )
            } else {
              return (
                <div>
                  <a onClick={() => this.handleOpenMsg(record)}>消息详情</a>
                  {isSendUp ?
                    <span>
                      <Divider type="vertical" />
                      <a onClick={() => this.handleOpenSend(record)}>模拟上发</a>
                    </span> : ''
                  }
                </div>
              )
            }
          } else if (record.direction === '2') {
            if (record.channelType === 'SMS' && record.smsMsgId) {
              return (
                <div>
                  <a onClick={() => this.handleOpenMsg(record)}>消息详情</a>
                  <Divider type="vertical" />
                  <a onClick={() => this.handleOpenSMS(record.smsMsgId)}>短信详情</a>
                  {isSendDown ?
                    <span>
                      <Divider type="vertical" />
                      <a onClick={() => this.handleOpenSend(record)}>模拟下发</a>
                    </span> : ''
                  }
                </div>
              )
            } else {
              return (
                <div>
                  <a onClick={() => this.handleOpenMsg(record)}>消息详情</a>
                  {isSendDown ?
                    <span>
                      <Divider type="vertical" />
                      <a onClick={() => this.handleOpenSend(record)}>模拟下发</a>
                    </span> : ''
                  }
                </div>
              )
            }
          }
        },
      },
    ]
    const searchCol = (
      <div style={{ overflow: 'hidden' }}>
        <span className={styles.expendButtons}>
          <Button disabled={refreshDisable} type="primary" onClick={this.handleSearch}>查询</Button>
          &nbsp;&nbsp;
          <Button disabled={refreshDisable} onClick={this.handleFormReset}>重置</Button>
        </span>
      </div>
    )
    const tboxTypeCol = (
      <Col md={6} sm={24}>
        <FormItem name="tboxType" rules={[
          { required: false, message: '请选择' },
        ]}>
          <RadioGroup onChange={this.onTboxTypeChange}>
            <RadioButton value="other">其他日志</RadioButton>
            <RadioButton value="dm">DM日志</RadioButton>
          </RadioGroup>
        </FormItem>
      </Col>
    )
    return (
      <div>
        <div className={styles.cardForm}>
          <Form ref="form">
            {R.equals(tboxType, 'other') ? (
              <Fragment>
                <Row gutter={{ md: 16, lg: 24, xl: 48 }}>
                  {tboxTypeCol}
                  <Col md={6} sm={24}>
                    <FormItem label="Service Type" name="serviceType" rules={[
                      { required: false, message: '请选择' },
                    ]}>
                      <Select
                        onChange={this.onServiceTypeChange}
                        allowClear
                        placeholder="请选择"
                        options={serviceTypeOptions} />
                    </FormItem>
                  </Col>
                  <Col md={6} sm={24} offset={3}>
                    <FormItem label="Message Type" name="messageType" rules={[
                      { required: false, message: '请选择' },
                    ]}>
                      <Select
                        onChange={this.onMessageTypeChange}
                        allowClear
                        placeholder="请选择"
                        options={msgTypeOptions}
                      />
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={{ md: 16, lg: 24, xl: 48 }}>
                  <Col xl={11} xxl={8}  offset={6}>
                    <FormItem label={<span style={{ marginLeft: '3em' }}>时间</span>} name="userLogRangeOther">
                      <RangePicker
                        style={{ width: '100%' }}
                        placeholder={['开始时间', '结束时间']}
                        format="YYYY-MM-DD HH:mm:ss"
                        showTime={true}
                      />
                    </FormItem>
                  </Col>
                  <Col xl={6} xxl={5} sm={24} offset={1} >
                    {searchCol}
                  </Col>
                </Row>
              </Fragment>
            ) : (
              <Row gutter={{ md: 16, lg: 24, xl: 48 }}>
                {tboxTypeCol}
                <Col xl={11} xxl={8} >
                  <FormItem label={<span style={{ marginLeft: '3em' }}>时间</span>} name="userLogRangedm">
                    <RangePicker
                      style={{ width: '100%' }}
                      placeholder={['开始时间', '结束时间']}
                      format="YYYY-MM-DD HH:mm:ss"
                      showTime={true}
                    />
                  </FormItem>
                </Col>
                <Col xl={6} xxl={5}  offset={1} >
                  {searchCol}
                </Col>
              </Row>
            )}
          </Form>
        </div>
        <div className={R.equals(tboxType, 'other') ? styles.pageButton : styles.dmPageButton}>
          <Button disabled={leftDisable} type="primary" size="small" icon={<CaretLeftOutlined />} onClick={this.onLeft} />
          &nbsp;&nbsp;
          <Button disabled={rightDisable} type="primary" size="small" icon={<CaretRightOutlined />} onClick={this.onRight} />
          &nbsp;&nbsp;
          <Button disabled={refreshDisable} type="primary" size="small" icon={<ReloadOutlined />} onClick={this.onRefresh} />
        </div>
        <div>
          <Table
            size="small"
            rowKey='_id'
            pagination={tboxPage}
            dataSource={tboxList}
            columns={column2}
            loading={tboxLoading}
            scroll={{ x: '150%' }}
            onChange={this.handleTableChange}
          />
        </div>
      </div>
    )
  }

  render() {
    const { msgVisible, msg, sendVisible, title, typeDisable, url, sms, smsVisible } = this.state
    return (
      <div>
        {this.renderSimpleForm()}
        <VehicleDetailMsgModal
          msgVisible={msgVisible}
          msg={msg}
          handleCloseMsg={this.handleCloseMsg}
        />
         <SMSModal
            msgVisible={smsVisible}
            sms={sms}
            handleCloseMsg={this.handleCloseSMS}
          />
        <SendMsgModal
          sendVisible={sendVisible}
          handleCloseSend={this.handleCloseSend}
          title={title}
          onRef={this.onRef}
          dispatch={this.props.dispatch}
          typeDisable={typeDisable}
          url={url}
        />
      </div>
    );
  }
}
